<template>
    <div>
        <path-tracking :path="path"/>  
        <div class="formLayout">
            <el-row class="rows basic">
                <el-col :sm="12" :md="8" :lg="6">
                    <div class="items" ref="type">
                        <label class="label" for="">
                            <img class="required" src="@/assets/img/flower_red.png" alt="">
                            客户分类
                        </label>
                        <el-select size="small" class="input-cont" placeholder="请选择内容" v-model="customerClassify">
                            <!-- <el-option label="请选择客户分类" value=""></el-option> -->
                            <el-option label="已成交客户" value="1"></el-option>
                            <el-option label="未成交客户" value="0"></el-option>
                        </el-select>
                    </div>
                </el-col>
                <el-col :sm="12" :md="8" :lg="6">
                    <div class="items" ref="time">
                        <label class="label" for="">
                            <img class="required" src="@/assets/img/flower_red.png" alt="">
                            沟通时间
                        </label>
                        <el-select size="small" class="input-cont" placeholder="请选择内容" v-model="callbackDate">
                            <!-- <el-option label="请选择沟通时间" value=""></el-option> -->
                            <el-option label="3小时内" value="1"></el-option>
                            <el-option label="3天/3周内" value="2"></el-option>
                            <el-option label="3周/3月内" value="3"></el-option>
                        </el-select>
                    </div>
                </el-col>
                <el-col :sm="12" :md="8" :lg="6">
                    <div class="items" ref="purpose">
                        <label class="label" for="">
                            <img class="required" src="@/assets/img/flower_red.png" alt="">
                            沟通事由
                        </label>
                        <el-select size="small" class="input-cont" placeholder="请选择内容" v-model="callbackPurpose">
                            <el-option v-for="(item,index) in options" :key="index" :label="item" :value="item"></el-option>
                        </el-select>
                    </div>
                </el-col>
                <el-col :sm="12" :md="8" :lg="6">
                    <div class="items" ref="callWay">
                        <label class="label" for="">
                            <img class="required" src="@/assets/img/flower_red.png" alt="">
                            沟通方式
                        </label>
                        <el-select size="small" class="input-cont" placeholder="请选择内容" v-model="callbackWay">
                            <el-option label="请选择沟通方式" value=""></el-option>
                            <el-option label="电话" value="1"></el-option>
                            <el-option label="微信" value="2"></el-option>
                            <el-option label="短信" value="3"></el-option>
                        </el-select>
                    </div>
                </el-col>
            </el-row>
            <el-row class="rows basic" style="margin-top: 1rem;">
                <el-col>
                    <div class="items" ref="content">
                        <label class="label" for="">
                            <img class="required" src="@/assets/img/flower_red.png" alt="">
                            话术内容
                        </label>
                        <el-input type='textarea' rows="10" class="textArea" v-model="content" />
                    </div>
                </el-col>
            </el-row>
            <div class="formBtnList">
                <button class="sureBtn" @click="toSure">确定</button>
                <button class="cancelBtn" @click="toCancel">取消</button>
            </div>
        </div>
    </div>
</template>

<script>
import pathTracking from '@/components/common/pathTracking'
export default {
    name:'createTalking',
    components:{
        pathTracking
    },
    data(){
        return{
            path: ['CRM', '营销宝典', {label: '回访话术', name: 'returnInterview'}, '新建话术'],
            options:['新注册客户售前回访','二次复购跟进回访','售后客户关怀回访','售后提醒通知回访','活动提醒通知回访','售中提醒通知回访','粉钻预约回访','其他临时回访','客户投诉'],
            customerClassify:'',
            callbackDate:'',
            callbackPurpose:'',
            callbackWay:'',
            content:''
        }
    },
    methods:{
        toCancel(){
            this.$router.replace({name:'returnInterview'})
        },
        //验证
        validateData() {
            var regExp = /^[ ]*$/
            var pass = true;
            regExp.test(this.customerClassify) && (pass = false)
            regExp.test(this.callbackDate) && (pass = false)
            regExp.test(this.callbackPurpose) && (pass = false) 
            regExp.test(this.callbackWay) && (pass = false)
            regExp.test(this.content) && (pass = false)

            regExp.test(this.customerClassify) ? this.$refs.type.classList.add('checkedRedInput') : this.$refs.type.classList.remove('checkedRedInput')
            regExp.test(this.callbackDate) ? this.$refs.time.classList.add('checkedRedInput') : this.$refs.time.classList.remove('checkedRedInput')
            regExp.test(this.callbackPurpose) ? this.$refs.purpose.classList.add('checkedRedInput') : this.$refs.purpose.classList.remove('checkedRedInput')
            regExp.test(this.callbackWay) ? this.$refs.callWay.classList.add('checkedRedInput') : this.$refs.callWay.classList.remove('checkedRedInput')
            regExp.test(this.content) ? this.$refs.content.classList.add('checkedRedInput') : this.$refs.content.classList.remove('checkedRedInput')
            return pass
        },
        toSure(){
            if(!this.validateData()) {
                this.$message({
                    message: '内容不能为空',
                    type: 'warning'
                });
                return
            }
            var pass = true;
            var that = this;
            var obj ={
                customerClassify:this.customerClassify,
                callbackDate:this.callbackDate,
                callbackPurpose:this.callbackPurpose,
                callbackWay:this.callbackWay,
                content:this.content
            }
            console.log('新建话术内容',obj);
            that.$ajax({
				url:api.crm + '/speechcraftInfo',
				method:'POST',
				data:obj
			}).then((res) => {
                console.log('新建话术是否成功',res);
                var data = res.data;
                if(data.status == 200){
                    that.$message({
                        message: '新建话术成功',
                        type: 'success'
                    });
                    setTimeout(function(){
                        that.clearData();
                        that.toJump()
                    },2000)
                }else{
                    that.$message({
                        message: data.msg,
                        type: 'warning'
                    });
                }
            }).catch((err) => {
                that.$message({
                    message: err.data.msg,
                    type: 'warning'
                });
            })
            
        },
        clearData(){
            this.customerClassify ='',
            this.callbackDate='',
            this.callbackPurpose='',
            this.callbackWay = '',
            this.content=''
        },
        toJump(){
            this.$router.replace({name:'returnInterview'})
        }
    }
}
</script>

<style>
@import '../../../customerManagement/components/css/viewCommon.css';
</style>

<style scoped>
.textArea {
    width: 100%;
    resize: none;
    border-radius: 5px;
    font-size: 14px;
    color: #606266;
    line-height: 1.5;
}
.formLayout {
    margin: 16px;
    background-color: #fff;
    height: 100%;
    overflow: auto;
    padding: 16px;
    border-radius: 8px;
}
</style>
